<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { indexConfig } from './config'
import type { ICaseTableItem } from './type'
import router from '@/routes'
import { addCase, deleteCase, getAllCases, updateCase } from '@/api/cases'
import PageFormTable from '@/components/page/BaseFormTable/index.vue'
import { useFetch } from '@/composables/useFetch'

/**
 * 模板复制更新步骤
 * 1 配置config table form(根据table的字段去设计form的prop方便直接回填)
 * 2 配置api以及相应的类型Iresq Iresp ITableItem
 */

const route = useRoute()

const PageFormTableRef = ref<InstanceType<typeof PageFormTable>>()
const apiConfig = {
  getTableList: getAllCases,
  addTableItem: addCase,
  updateTableItem: updateCase,
  PageFormTableRef,
  // 接口数据提交前的格式处理
  _handleModel,
  _handleEditModel,
}

// 页面请求
const { data: listResult, execute: getListExecute } = useFetch(parmas => getAllCases(parmas))
const { data: deleteCaseResult, loading: deleteLoading, execute: deleteCaseExecute } = useFetch((parmas: ICaseTableItem) => deleteCase(parmas))

// 顶部搜索初始化
const searchFormOptions = ref(indexConfig.searchFormOptions)
onMounted(() => {
  _handleInitSearchForm()
})
async function _handleInitSearchForm() {
  await getListExecute({ onePage: true })
  const tableList = listResult.value!.data || []
  const children = tableList.map((item: any) => {
    return {
      type: 'select-option',
      label: item.name,
      value: item.name,
    }
  })
  // 动态修改searchFormOptions配置项的内容，需要响应式到模板
  searchFormOptions.value = indexConfig.searchFormOptions.map((item: any) => {
    if (item.prop === 'name') {
      return {
        ...item,
        children,
      }
    }
    return item
  })
}

// 删除case
async function onClickDeleteAction(data: ICaseTableItem) {
  await deleteCaseExecute({ caseId: data.caseId })
  if (deleteCaseResult.value!.code === 200) {
    window.$message.success(deleteCaseResult.value!.message || 'delete success!')
    PageFormTableRef.value?.getList(route.query)
  }
}

// 详情case
function onClickDetailAction(data: ICaseTableItem) {
  router.push({ path: '/cases/detail', query: { ...route.query, id: `${data.caseId}` } })
}

function _handleModel(data: ICaseTableItem) {
  return {
    ...data,
    JsonArgs: {},
    disabled: data.disabled ? '1' : '0',
    shared: data.shared ? '1' : '0',
  }
}

function _handleEditModel(data: ICaseTableItem) {
  return {
    ...data,
    disabled: data.disabled === '1',
    shared: data.shared === '1',
  }
}
</script>

<template>
  <PageFormTable
    ref="PageFormTableRef"
    :search-form-options="searchFormOptions"
    :config="indexConfig"
    :api-config="apiConfig"
    @custom-row-event="onClickDetailAction"
  >
    <template #customs="{ column, record }">
      <template v-if="column.dataIndex === 'action'">
        <div class="gp__flex-start">
          <a-button class="gp__second-btn" @click="onClickDetailAction({ ...record })">
            {{ indexConfig.text.detailAction }}
          </a-button>
          <a-button class="gp__plain-btn" @click.stop="PageFormTableRef?.onClickEditForm({ ...record })">
            {{ indexConfig.text.editAction }}
          </a-button>
          <a-popconfirm
            :title="indexConfig.text.deletePopTitle"
            :cancel-text="indexConfig.text.popNoText"
          >
            <template #okButton>
              <a-button type="primary" size="small" :loading="deleteLoading" @click="onClickDeleteAction({ ...record })">
                {{ indexConfig.text.popYesText }}
              </a-button>
            </template>
            <a-button danger @click.stop>
              {{ indexConfig.text.deleteAction }}
            </a-button>
          </a-popconfirm>
        </div>
      </template>
    </template>
  </PageFormTable>
</template>
